/**
 * new Vue({
 *  el:'',
 *  data:{},
 *  option:{}
 * })
 * */ 
class Vue{
    constructor(options) {
        // 1.通过属性保存选项的数据
        this.$options = options || {}
        this.$data = options.data || {};
        this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el;
        // 2.把data中的成员转换为getter何setter，注入到Vue实例中
        this._ProxyData(this.$data)
        // 3.调用observer对象，监听数据的变化
        new Observer(this.$data)
        // 4.调用compiler对象，解析指令和差值表达式
        new Compiler(this)
    }
    _ProxyData(data) {
        // 遍历data中的所有属性
        Object.keys(data).forEach(key => {
           // 把data的属性注入到vue实例中 
           Object.defineProperty(this, key ,{
               enumerable: true,
               configurable: true,
               get() {
                return data[key];
               },
               set (newVal) {
                if(data[key] === newVal){ return };
                data[key] = newVal;
               }
           })
        })
        
    }
}

